<template>
	<view class="container">
		<view class="navbar">
			<button type="default" plain class="talk-btn">
				<image src="/static/images/order/order_icon_talk2.0.png"></image>
				<view>想对你说</view>
			</button>
		</view>
		<view class="tabbar">
			<view class="item" :class="{active: currentId=='noPay'}" @tap="switchTab('noPay')">待付款</view>
			<view class="item" :class="{active: currentId=='noFa'}" @tap="switchTab('noFa')">待发货</view>
			<view class="item" :class="{active: currentId=='noShou'}" @tap="switchTab('noShou')">待收货</view>
			<view class="item" :class="{active: currentId=='noComment'}" @tap="switchTab('noComment')">待评论</view>
		</view>
		<swiper :current-item-id="currentId" :duration="300" class="swiper" >
			<!-- 当前订单 begin -->
			<swiper-item @touchmove.stop="handleSwiperItemChange" item-id="noPay">
				<scroll-view class="order-scroll" scroll-y scroll-with-animation :scroll-top="0" >
				<view class="order-list">
					<navigator class="order" v-for="(order, index) in orders" :key="index" open-type="navigate" :url="'/pages/order/detail?id=' + order.orderId">
						<view class="header">
							<view class="flex-fill font-size-medium">雨瑞商贸</view>
							<view class="status">
								<view>待付款</view>
								<image src="/static/images/common/black_arrow_right.png"></image>
							</view>
						</view>
						<scroll-view scroll-x>
							<view class="images">
								<image :src="item.itemImg" v-for="(item, index) in order.items" :key="index"></image>
							</view>
						</scroll-view>
						<view class="info">
							<view class="left">
								<view>订单编号：{{ order.orderId }}</view>
								<view>下单时间：{{ order.status.createdTime }}</view>
								<view>订单还有：{{ Math.round((order.expireSeconds/60)) }}分钟后自动关闭</view>
							</view>
							<view class="right">
								￥{{ order.realPayAmount }}
							</view>
						</view>
						<view class="action">
							<button type="default" hover-class="none" @click.stop="continuePay(order.orderId)">继续支付</button>
							<button type="default" hover-class="none" @click.stop="cancelOrder(order.orderId)">取消订单</button>
						</view>
					</navigator>
				</view>
				</scroll-view>
			</swiper-item>
			<!-- 待付款 end -->
			<!-- 当前订单 begin -->
			<swiper-item @touchmove.stop="handleSwiperItemChange" item-id="noFa">
				<scroll-view class="order-scroll" scroll-y scroll-with-animation :scroll-top="0" >
				<view class="order-list">
					<navigator class="order" v-for="(order, index) in orders" :key="index" open-type="navigate" :url="'/pages/order/detail?id=' + order.orderId">
						<view class="header">
							<view class="flex-fill font-size-medium">雨瑞商贸</view>
							<view class="status">
								<view>待发货</view>
								<image src="/static/images/common/black_arrow_right.png"></image>
							</view>
						</view>
						<scroll-view scroll-x>
							<view class="images">
								<image :src="item.itemImg" v-for="(item, index) in order.items" :key="index"></image>
							</view>
						</scroll-view>
						<view class="info">
							<view class="left">
								<view>订单编号：{{ order.orderId }}</view>
								<view>下单时间：{{ order.status.createdTime }}</view>
							</view>
							<view class="right">
								￥{{ order.realPayAmount }}
							</view>
						</view>
						<view class="action">
							<button type="default" hover-class="none" @click.stop="notify">提醒发货</button>
							<button type="primary" plain hover-class="none" @click.stop="another">再来一单</button>
						</view>
					</navigator>
				</view>
				</scroll-view>
			</swiper-item>
			<!-- 待发货 end -->
			<!-- 当前订单 begin -->
			<swiper-item @touchmove.stop="handleSwiperItemChange" item-id="noShou">
				<scroll-view class="order-scroll" scroll-y scroll-with-animation :scroll-top="0" >
				<view class="order-list">
					<navigator class="order" v-for="(order, index) in orders" :key="index" open-type="navigate" :url="'/pages/order/detail?id=' + order.orderId">
						<view class="header">
							<view class="flex-fill font-size-medium">雨瑞商贸</view>
							<view class="status">
								<view>待收货</view>
								<image src="/static/images/common/black_arrow_right.png"></image>
							</view>
						</view>
						<scroll-view scroll-x>
							<view class="images">
								<image :src="item.itemImg" v-for="(item, index) in order.items" :key="index"></image>
							</view>
						</scroll-view>
						<view class="info">
							<view class="left">
								<view>订单编号：{{ order.orderId }}</view>
								<view>下单时间：{{ order.status.createdTime }}</view>
							</view>
							<view class="right">
								￥{{ order.realPayAmount }}
							</view>
						</view>
						<view class="action">
							<button type="default" hover-class="none">查看物流</button>
							<button type="primary" plain hover-class="none" @click.stop="confirmOrder(order.orderId)">确认收货</button>
						</view>
					</navigator>
				</view>
				</scroll-view>
			</swiper-item>
			<!-- 待收货 end -->
			<!-- 当前订单 begin -->
			<swiper-item @touchmove.stop="handleSwiperItemChange" item-id="noComment">
				<scroll-view class="order-scroll" scroll-y scroll-with-animation :scroll-top="0" >
				<view class="order-list">
					<navigator class="order" v-for="(order, index) in orders" :key="index" open-type="navigate" :url="'/pages/order/detail?id=' + order.orderId">
						<view class="header">
							<view class="flex-fill font-size-medium">{{ order.shop.name }}</view>
							<view class="status">
								<view>待评论</view>
								<image src="/static/images/common/black_arrow_right.png"></image>
							</view>
						</view>
						<scroll-view scroll-x>
							<view class="images">
								<image :src="item.itemImg" v-for="(item, index) in order.items" :key="index"></image>
							</view>
						</scroll-view>
						<view class="info">
							<view class="left">
								<view>订单编号：{{ order.orderId }}</view>
								<view>下单时间：{{ order.status.createdTime }}</view>
							</view>
							<view class="right">
								￥{{ order.realPayAmount }}
							</view>
						</view>
						<view class="action">
							<button type="default" hover-class="none" @click.stop="comment(order.orderId)">评论</button>
							<button type="primary" plain hover-class="none">查看物流</button>
						</view>
					</navigator>
				</view>
				</scroll-view>
			</swiper-item>
			<!-- 待评论 end -->
		</swiper>
		<!-- <image src="https://go.cdn.heytea.com/storage/ad/2020/05/20/1a389117c2fb44d5bcad4a910a68246c.jpg"></image> -->
		<u-keyboard
			default=""
			ref="uKeyboard" 
			mode="number" 
			:mask="true" 
			:mask-close-able="false"
			:dot-enabled="false" 
			v-model="show"
			:safe-area-inset-bottom="true"
			:tooltip="false"
			@change="onChange"
			@backspace="onBackspace">
			<view>
				<view class="u-text-center u-padding-20 money">
					<text>{{tempOrder.realPayAmount}}</text>
					<text class="u-font-20 u-padding-left-10">元</text>
					<view class="u-padding-10 close" data-flag="false" @tap="showPop(false)">
						<u-icon name="close" color="#333333" size="28"></u-icon>
					</view>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input 
						mode="box" 
						:maxlength="6"
						:dot-fill="true"
						v-model="password"
						:disabled-keyboard="true"
						@finish="finish"
					></u-message-input>
				</view>
				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
			</view>
		</u-keyboard>
	</view>
</template>

<script>
	import {mapState, mapMutations} from 'vuex'
export default {
	
	data() {
		return {
			tabIndex: 0,
			currentId:'noPay',
			orderMenuIndex: 0,
			storeOrders: [],
			show:false,
			password:'',
			tempOrder:{},
		}
	},
	async onLoad() {
		this.getOrders(); 
	},
	async onPullDownRefresh (){
		this.getOrders(); 
		uni.stopPullDownRefresh()
	},
	computed: {
		...mapState(['ordersCache']),
		orders(){
			let data=JSON.parse(JSON.stringify(this.ordersCache))|| [];
			if(this.currentId=='noPay'){
				
				return data.filter(d=>d.status.orderStatus==10);
			}else if(this.currentId=='noFa'){
				return data.filter(d=>d.status.orderStatus==20);
			}else if (this.currentId=='noShou'){
				return data.filter(d=>d.status.orderStatus==30);
			}else{
				return data.filter(d=>d.commentFlag==0 && d.status.orderStatus==40);
			}
		},
				batchInvoiceVisible() {
			return (!this.orderMenuIndex && this.orders.length) || (this.orderMenuIndex && this.storeOrders.length)
		}
	},
	methods: {
		...mapMutations(['SET_ORDER','SET_USERINFO']),
		cancelOrder(orderId){
			if(!orderId){return;}
			let that=this;
			that.$u.api.orders.cancelOrder(orderId).then(res=>{
				that.SET_ORDER(res);
			})
		},
		notify(){
			uni.showLoading({
				title:'处理中……'
			});
			setTimeout(()=>{
				uni.hideLoading();
				uni.showToast({
					title:'提醒成功',
					icon:'success',
					mask:true
				})
			},2000);
		},
		confirmOrder(orderId){
			let that=this;
			if(!orderId){
				return;
			}
			that.$u.api.orders.confirm(orderId).then(res=>{
				that.SET_ORDER(res);
				
				that.currentId='noComment';
			})
			
		},
		another(){
			uni.switchTab({
				url:'/pages/index/index'
			})
		},
		showPop(flag = true){
			this.password = '';
			this.show = flag;
		},
		continuePay(orderId){
			let that=this;
			that.$u.api.orders.getOne(orderId).then(res=>{
				that.tempOrder=res;
				that.password = '';
				
				that.$nextTick(function(){
					that.show = true;
				})
			})
		},
		
		async switchTab(itemid) {
			if(this.currentId === itemid) return
			this.currentId = itemid
			if(this.currentId) {
				await this.getOrders()
			}
		},
		handleSwiperItemChange() {	//禁止手动滑动
			return true
		},
		async getOrders() {
			let that=this;
			that.$u.api.orders.get().then(res=>{
				that.SET_ORDER(res);
			})
			
		},
		onChange(val){
			if(this.password.length<6){
				this.password += val;
			}
			
			if(this.password.length>=6){
				this.pay();
			}
		},
		onBackspace(e){
			if(this.password.length>0){
				this.password = this.password.substring(0,this.password.length-1);
			}
		},
		pay(){
			uni.showLoading({
				title:'支付中'
			})
			let that=this;
			that.$u.api.orders.pay(that.tempOrder.id).then(res=>{
				uni.hideLoading();
				that.show = false;
				uni.showToast({
					icon:'success',
					title:'支付成功'
				})
				that.$nextTick(function(){
					that.$u.api.orders.get().then(result=>{
						that.SET_ORDER(result);
						let userInfo=that.userInfo;
						that.$set(userInfo,'points',res.points);
						that.SET_USERINFO(userInfo);
						that.currentId='noFa';
						uni.setStorageSync('userinfo',userInfo);
					})
				})
			})
		},
		finish(){
			this.pay();
		},
		comment(orderId){
			uni.navigateTo({
				url:`/pages/index/addComment?id=${orderId}`
			})
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f6f6f6;
}
.navbar {
	height: calc(44px + var(--status-bar-height));
	/* #ifdef H5 */
	height: 44px;
	/* #endif */
	display: flex;
	background-color: #FFFFFF;
}

.talk-btn {
	height: 32px;
	margin-left: 10px;
	margin-top: 26px;
	/* #ifdef H5 */
	margin-top: 6px;
	/* #endif */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: $font-size-sm !important;
	padding: 0 20rpx;
	border-radius: 50rem !important;
	
	image {
		width: 40rpx;
		height: 40rpx;
		margin-right: $spacing-row-sm;
	}
}

.tabbar {
	height: 100rpx;
	background-color: $bg-color-white;
	display: flex;
	align-items: center;
	justify-content: space-around;
	
	.item {
		height: 100%;
		font-size: $font-size-lg;
		color: $text-color-assist;
		font-weight: 400 !important;
		display: flex;
		align-items: center;
		
		&.active {
			color: $text-color-base;
			border-bottom: 4rpx solid $text-color-base;
		}
	}
}

.swiper {
	width: 100%;
	height: calc(100vh - 44px - var(--status-bar-height) - 110rpx);
	/* #ifdef H5 */
	height: calc(100vh - 44px - var(--status-bar-height) - 110rpx - 100rpx);
	/* #endif */
}

.no-order-content {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	image {
		width: 300rpx;
		height: 300rpx;
		margin-bottom: 50rpx;
	}

	.tips {
		color: $text-color-assist;
		display: flex;
		flex-direction: column;
		align-items: center;
		line-height: 1.2rem !important;
		margin-bottom: 70rpx;
	}

	button {
		width: 50%;
	}
}

.history-order {
	width: 100%;
	height: 100%;
	position: relative;
	
	.menu {
		padding: 18rpx 30rpx;
		display: flex;
		align-items: center;
		font-size: $font-size-base;
		color: $text-color-grey;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		
		.item {
			padding: 14rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
			
			&.active {
				color: $color-primary;
				background-color: $bg-color-white;
			}
		}
	}
	
	.history-order-swiper {
		width: 100%;
		height: 100%;
	}
}

.store-order-wrapper {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: $font-size-base;
	color: $text-color-assist;
	line-height: 1.3rem !important;
	
	image {
		width: 400rpx;
		height: 333rpx;
		margin-bottom: 40rpx;
	}
}

.orders-scroll {
	width: 100%;
	height: 100%;
	padding-top: 104rpx;
}

.order-list {
	display: flex;
	width: 100%;
	flex-direction: column;
	
	.order {
		background-color: $bg-color-white;
		padding: 30rpx 40rpx;
		margin-bottom: 18rpx;
		
		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.status {
				font-size: $font-size-base;
				color: $text-color-grey;
				display: flex;
				align-items: center;
				image {
					width: 30rpx;
					height: 30rpx;
					margin-left: $spacing-row-sm;
				}
			}
		}
		
		.images {
			display: flex;
			padding: 30rpx 0;
			image {
				flex-shrink: 0;
				width: 150rpx;
				height: 112.5rpx;
			}
		}
		
		.info {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			
			.left {
				flex: 1;
				display: flex;
				flex-direction: column;
				font-size: $font-size-base;
				color: $text-color-grey;
			}
			
			.right {
				font-size: $font-size-lg;
				color: $text-color-base;
			}
		}
		
		.action {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			
			button {
				margin-left: 30rpx;
				font-size: $font-size-sm;
			}
		}
	}
}

.order-scroll{
	height: 500px;
}
</style>
